home *** CD-ROM | disk | FTP | other *** search
/ Dynamic HTML Construction Kit / Dynamic HTML Construction Kit.iso / source_code / dhtmlunl / dhtml.exe / CD Content / Chap24 / dun24_1.txt next >
Encoding:
Text File  |  1997-12-18  |  2.9 KB  |  111 lines
  1. <HTML>
  2. <HEAD>
  3. <TITLE>
  4. Dynamic HTML Multimedia
  5. </TITLE>
  6. </HEAD>
  7.  
  8. <SCRIPT LANGUAGE="VBScript">
  9. dim dir1_x, dir1_y, dir2_x, dir2_y
  10.  
  11. 'Set some initial x,y directions for Balloon1
  12. dir1_x=5
  13. dir1_y=-2
  14.  
  15. 'Set some initial x,y directions for Balloon2
  16. dir2_x=-3
  17. dir2_y=4
  18.  
  19. sub window_onload()
  20.     'Start a timer.  Every 100ms (1/10 second), call the
  21.     'function that updates the balloon positions.
  22.     window.settimeout "moveBalloons()",100
  23. end sub
  24.  
  25. sub swapZOrder()
  26.     'Z-Order for the balloons initially are 0 and 1.
  27.     'Doing a "NOT" will toggle state of zIndex property
  28.     'between 0 and 1. This treats the property as boolean
  29.     '     ie: not 1 = 0, not 0 = 1
  30.  
  31.     balloon1.style.zIndex = not balloon1.style.zIndex
  32.     balloon2.style.zIndex = not balloon2.style.zIndex
  33. end sub
  34.  
  35. sub moveBalloons()
  36.     bal1_x = balloon1.style.posLeft
  37.     bal1_y = balloon1.style.posTop
  38.     bal2_x = balloon2.style.posLeft
  39.     bal2_y = balloon2.style.posTop
  40.  
  41.     'If balloon goes off the sides of the screen,
  42.     'Change the balloon's direction.
  43.     if bal1_x<0 or bal1_x>500 then
  44.         dir1_x = -1 * dir1_x
  45.     end if
  46.  
  47.     if bal1_y<0 or bal1_y>400 then
  48.         dir1_y = -1 * dir1_y
  49.     end if
  50.  
  51.     if bal2_x<0 or bal2_x>500 then
  52.         dir2_x = -1 * dir2_x
  53.     end if
  54.  
  55.     if bal2_y<0 or bal2_y>400 then
  56.         dir2_y = -1 * dir2_y
  57.     end if
  58.  
  59.     'We want the balloon to shrink or expand when in the middle,
  60.     'depending on the direction of the balloon.
  61.     if bal1_x>200 and bal1_x<300 then
  62.         balloon1.style.posWidth=balloon1.style.posWidth + dir1_x
  63.         balloon1.style.posHeight=balloon1.style.posHeight + dir1_x
  64.     end if
  65.  
  66.     'We want the balloon to shrink or expand again past the middle,
  67.     'depending on the direction of the balloon.
  68.     if bal1_x>300 and bal1_x<400 then
  69.         balloon1.style.posWidth=balloon1.style.posWidth - dir1_x
  70.         balloon1.style.posHeight=balloon1.style.posHeight - dir1_x
  71.     end if
  72.  
  73.     balloon1.style.posleft = bal1_x + dir1_x
  74.     balloon1.style.posTop = bal1_y + dir1_y
  75.  
  76.     balloon2.style.posLeft = bal2_x + dir2_x
  77.     balloon2.style.posTop = bal2_y + dir2_y
  78.  
  79.     'Call this function again to create a loop, to continuously move.
  80.     window.settimeout "moveBalloons()",100
  81. end sub
  82.  
  83. </SCRIPT>
  84.  
  85. <BODY>
  86. <INPUT TYPE=BUTTON
  87.        VALUE="Swap Blue/Green Z-Order"
  88.        onClick="swapZOrder()">
  89.  
  90. <img id=balloon1
  91.      style="position:absolute;
  92.             left:0px;
  93.             top:100px;
  94.             width:92px;
  95.             height:164px;
  96.             z-index:1"
  97.      src="balloon1.gif">
  98.  
  99. <img id=balloon2
  100.      style="position:absolute;
  101.             width:92px;
  102.             height:164px;
  103.             left:500px;
  104.             top:50px;
  105.             z-index:0"
  106.      src="balloon2.gif">
  107.  
  108. </BODY>
  109.  
  110. </HTML>
  111.